﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="OBS.Pages.Chart.Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="title" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="using" runat="server">
    <link href="/css/minified/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <link href="/css/chart/style.css" rel="stylesheet" type="text/css" />
    <link href="/js/toolkit/daterangepicker.css" rel="stylesheet" type="text/css" />
    <link href="/css/response/1024.css" rel="stylesheet" type="text/css" />
    <link href="/css/response/10cols.css" rel="stylesheet" type="text/css" />
    <link href="/css/response/11cols.css" rel="stylesheet" type="text/css" />
    <link href="/css/response/12cols.css" rel="stylesheet" type="text/css" />
    <link href="/css/response/2cols.css" rel="stylesheet" type="text/css" />
    <link href="/css/response/3cols.css" rel="stylesheet" type="text/css" />
    <link href="/css/response/480.css" rel="stylesheet" type="text/css" />
    <link href="/css/response/4cols.css" rel="stylesheet" type="text/css" />
    <link href="/css/response/5cols.css" rel="stylesheet" type="text/css" />
    <link href="/css/response/6cols.css" rel="stylesheet" type="text/css" />
    <link href="/css/response/768.css" rel="stylesheet" type="text/css" />
    <link href="/css/response/7cols.css" rel="stylesheet" type="text/css" />
    <link href="/css/response/8cols.css" rel="stylesheet" type="text/css" />
    <link href="/css/response/9cols.css" rel="stylesheet" type="text/css" />
    <link href="/css/response/col.css" rel="stylesheet" type="text/css" />
    <script src="/js/moment.min.js" type="text/javascript"></script>
    <script src="/js/toolkit/daterangepicker.js" type="text/javascript"></script>
    <script src="/third-party/ui/minified/jquery-ui.min.js" type="text/javascript"></script>
    <script src="/third-party/amcharts/amcharts.js" type="text/javascript"></script>
    <script src="/third-party/amcharts/serial.js" type="text/javascript"></script>
    <script type='text/javascript' src="/third-party/amcharts/exporting/amexport.js"></script>
    <script type='text/javascript' src="/third-party/amcharts/exporting/canvg.js"></script>
    <script type='text/javascript' src="/third-party/amcharts/exporting/rgbcolor.js"></script>
    <script type='text/javascript' src="/third-party/amcharts/exporting/jspdf.js"></script>
    <script type='text/javascript' src="/third-party/amcharts/exporting/filesaver.js"></script>
    <script type='text/javascript' src="/third-party/amcharts/exporting/jspdf.plugin.addimage.js"></script>
    <script src="/js/date.js" type="text/javascript"></script>
    <script src="/js/vm/handler.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="header" runat="server">
    <script type="text/javascript">

        var chart1, chart2;
        var chartCate = 0;
        var _fromDate, _toDate;

        // generate some random data, quite different range
        function generateChartData(data, fromDate, toDate) {
            var chartData = [];
            var i = 0, j = 1;
            var newDate = new Date(fromDate);
            while (newDate <= toDate) {
                var value = 0;
                var value1 = 0;
                if (i < data.length) {
                    var a = data[i].category.jsonDate();
                    if (newDate.format('m/d/yyyy') === a) {
                        value = data[i].value;
                        value1 = data[i++].value1;
                    }
                }
                chartData.push({
                    date: newDate,
                    value: value,
                    value1: value1
                });
                newDate = new Date(fromDate);
                newDate.setDate(newDate.getDate() + (j++));
            }

            return chartData;
        }

        $(document).ready(function () {

            function initBarChart(id, chartData) {
                var chart;

                // SERIAL CHART
                chart = new AmCharts.AmSerialChart();
                chart.dataProvider = chartData;
                chart.categoryField = "category";
                chart.startDuration = 1;
                chart.rotate = true;
                chart.exportConfig = {
                    menuTop: "21px",
                    menuBottom: "auto",
                    menuRight: "21px",
                    backgroundColor: "#efefef",

                    menuItemStyle: {
                        backgroundColor: '#EFEFEF',
                        rollOverBackgroundColor: '#DDDDDD'
                    },

                    menuItems: [{
                        textAlign: 'center',
                        icon: '/third-party/amcharts/images/export.png',
                        title: 'export',
                        items: [{
                            title: 'JPG',
                            format: 'jpg'
                        }, {
                            title: 'PNG',
                            format: 'png'
                        }]
                    }]
                };

                // AXES
                // category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.labelRotation = 90;
                categoryAxis.gridPosition = "start";

                // value
                // in case you don't want to change default settings of value axis,
                // you don't need to create it, as one value axis is created automatically.

                // GRAPH
                var graph = new AmCharts.AmGraph();
                graph.valueField = "value";
                graph.balloonText = "[[category]]: <b>[[value]]</b>";
                graph.type = "column";
                graph.lineAlpha = 0;
                graph.fillAlphas = 0.8;
                graph.lineColor = "#0000ff";
                chart.addGraph(graph);

                // CURSOR
                var chartCursor = new AmCharts.ChartCursor();
                chartCursor.cursorAlpha = 0;
                chartCursor.pan = true;
                chartCursor.categoryBalloonEnabled = false;
                chart.addChartCursor(chartCursor);

                chart.write(id);

                return chart;
            }

            function initChart(id, chartData) {

                // SERIAL CHART    
                var chart = new AmCharts.AmSerialChart();
                chart.pathToImages = "/third-party/amcharts/images/";
                chart.dataProvider = chartData;
                chart.categoryField = "date";
                chart.balloon.bulletSize = 5;
                chart.exportConfig = {
                    menuTop: "21px",
                    menuBottom: "auto",
                    menuRight: "21px",
                    backgroundColor: "#efefef",

                    menuItemStyle: {
                        backgroundColor: '#EFEFEF',
                        rollOverBackgroundColor: '#DDDDDD'
                    },

                    menuItems: [{
                        textAlign: 'center',
                        icon: '/third-party/amcharts/images/export.png',
                        title: 'export',
                        items: [{
                            title: 'JPG',
                            format: 'jpg'
                        }, {
                            title: 'PNG',
                            format: 'png'
                        }]
                    }]
                };

                // listen for "dataUpdated" event (fired when chart is rendered) and call zoomChart method when it happens
                chart.addListener("dataUpdated", function () {
                    chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
                });

                // AXES
                // category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
                categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
                categoryAxis.dashLength = 1;
                categoryAxis.minorGridEnabled = true;
                categoryAxis.position = "top";
                categoryAxis.axisColor = "#DADADA";

                // value                
                var valueAxis = new AmCharts.ValueAxis();
                valueAxis.axisAlpha = 0;
                valueAxis.dashLength = 1;
                valueAxis.title = "booking & pax";
                valueAxis.titleColor = "#4D759E";
                chart.addValueAxis(valueAxis);

                // GRAPH
                var graph = new AmCharts.AmGraph();
                graph.title = "red line";
                graph.valueField = "value";
                graph.bullet = "round";
                graph.bulletBorderColor = "#FFFFFF";
                graph.bulletBorderThickness = 2;
                graph.bulletBorderAlpha = 1;
                graph.lineThickness = 2;
                graph.lineColor = "#ff0000";
                graph.negativeLineColor = "#efcc26";
                graph.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
                chart.addGraph(graph);

                // GRAPH
                graph = new AmCharts.AmGraph();
                graph.title = "blue line";
                graph.valueField = "value1";
                graph.bullet = "round";
                graph.bulletBorderColor = "#FFFFFF";
                graph.bulletBorderThickness = 2;
                graph.bulletBorderAlpha = 1;
                graph.lineThickness = 2;
                graph.lineColor = "#0000ff";
                graph.negativeLineColor = "#efcc26";
                graph.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
                chart.addGraph(graph);

                // CURSOR
                var chartCursor = new AmCharts.ChartCursor();
                chartCursor.cursorPosition = "mouse";
                chartCursor.pan = true; // set it to fals if you want the cursor to work in "select" mode
                chart.addChartCursor(chartCursor);

                // SCROLLBAR
                var chartScrollbar = new AmCharts.ChartScrollbar();
                chart.addChartScrollbar(chartScrollbar);

                // WRITE
                chart.write(id);

                return chart;
            }

            AmCharts.ready(function () {
                _fromDate = Date.today().last().monday();
                _toDate = Date.today().next().sunday();
                var data = handlerModule.loadAnalytics(_fromDate, _toDate, chartCate);

                var chartData = generateChartData(data[0].Data, _fromDate, _toDate);

                chart1 = initChart('bookingChart', chartData);
                chart2 = initBarChart('topMostChart', data[1].Data);

                $('#date-range1').val(_fromDate.toString('MM/dd/yyyy') + ' to ' + _toDate.toString('MM/dd/yyyy'));
            });

            var customSettings = {
                format: 'MM/DD/YYYY',
                separator: ' to ',
                language: 'auto',
                startOfWeek: 'sunday', // or sunday
                getValue: function () {
                    return this.value;
                },
                setValue: function (s) {
                    this.value = s;
                },
                startDate: false,
                endDate: false,
                minDays: 0,
                maxDays: 0,
                showShortcuts: true,
                shortcuts:
	            {
	                //'prev-days': [1,3,5,7],
	                'next-days': [3, 5, 7],
	                //'prev' : ['week','month','year'],
	                'next': ['week', 'month', 'year']
	            },
                customShortcuts: []
            };

            $('#date-range1').dateRangePicker(customSettings).bind('datepicker-change', function (event, obj) {
                console.log(obj);

            })
            .bind('datepicker-apply', function (event, obj) {
                console.log(obj);

                _fromDate = obj.date1;
                _toDate = obj.date2;
                var data = handlerModule.loadAnalytics(_fromDate, _toDate, chartCate);

                var chartData = generateChartData(data[0].Data, _fromDate, _toDate);
                chart1.dataProvider = chartData;
                chart1.validateData();

                chart2.dataProvider = data[1].Data;
                chart2.validateData();

                if (data[2]) {
                    $('#btnViewMore').show();
                }
                else {
                    $('#btnViewMore').hide();
                }
            })
            .bind('datepicker-close', function () {
                console.log('close');
            });

        });

        // changes cursor mode from pan to select
        function setPanSelect() {
            if (document.getElementById("rb1").checked) {
                chart1.chartCursor.pan = false;
                chart1.chartCursor.zoomable = true;
                chart2.chartCursor.pan = false;
                chart2.chartCursor.zoomable = true;
            } else {
                chart1.chartCursor.pan = true;
                chart2.chartCursor.pan = true;
            }
            chart1.validateNow();
            chart2.validateNow();
        }

        function setChartCate(cate) {
            chartCate = cate;

            var data = handlerModule.loadTopCategory(_fromDate, _toDate, chartCate);

            chart2.dataProvider = data[0].Data;
            chart2.validateData();

            if (data[1]) {
                $('#btnViewMore').show();
            }
            else {
                $('#btnViewMore').hide();
            }
        }

        function viewMore() {
            var data = handlerModule.loadAllCategory(_fromDate, _toDate, chartCate);

            chart2.dataProvider = data[0].Data;
            chart2.validateData();

            $('#btnViewMore').hide();
        }
        
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="content" runat="server">
    <h2>
        Analytics</h2>
    <div class="group-box">
        <div class="section group">
            <div class="col span_2_of_6">
                <input type="text" id="date-range1" style="width: 200px;" />
                <%--<input type="button" id="btnRefresh" value="Refresh" />--%>
            </div>
            <div class="col span_2_of_6">
                <div style="width: 20px; height: 20px; background-color: #0000ff; float: left; margin-right: 10px;">
                </div>
                <div style="float: left; margin-right: 10px;">
                    pax</div>
                <div style="width: 20px; height: 20px; background-color: #ff0000; float: left; margin-right: 10px;">
                </div>
                <div style="float: left; margin-right: 10px;">
                    booking</div>
            </div>
        </div>
    </div>
    <h2>
        Bookings & pax summanry</h2>
    <div id="bookingChart" style="width: 100%; height: 342px;">
    </div>
    <div style="margin-left: 35px;">
        <input type="radio" name="group" id="rb1" onclick="setPanSelect()" />Select
        <input type="radio" checked="checked" name="group" id="rb2" onclick="setPanSelect()" />Pan</div>
    <div class="section group">
        <div class="col span_1_of_6">
            <h2>
                Demographics</h2>
            <div class="chartCate">
                <div>
                    <a href="javascript:void(0)" onclick="javascript:setChartCate(1);">Country</a></div>
                <div>
                    <a href="javascript:void(0)" onclick="javascript:setChartCate(2);">Customer Type</a>
                </div>
                <div>
                    <a href="javascript:void(0)" onclick="javascript:setChartCate(3);">Customer</a>
                </div>
            </div>
            <h2>
                Services</h2>
            <div class="chartCate">
                <div>
                    <a href="javascript:void(0)" onclick="javascript:setChartCate(0);">Cabins</a></div>
            </div>
        </div>
        <div class="col span_5_of_6">
            <div id="topMostChart" style="width: 100%; height: 362px;">
            </div>
            <div>
                <a id="btnViewMore" href="javascript:void(0)" onclick="javascript:viewMore();" style="display: none;">
                    View more ...</a></div>
        </div>
    </div>
</asp:Content>
